<template>
  <div class="app-container">
    <el-form label-width="120px">
    <el-form-item label="应用名称">
      {{form.name}}
    </el-form-item>
    <el-form-item label="秘钥">
      {{form.secret}}
    </el-form-item>
    <el-form-item label="通信网关">
      {{form.gateway}}
    </el-form-item>
    <el-form-item label="状态">
      <span :type="form.status | statusFilter">{{form.enable ? '有效' : '暂停'}}</span>
    </el-form-item>
    <el-form-item label="应用回调配置">
      <span v-for="i in form.hooks" style="margin-right: 10px">{{logTypePush[i]}}</span>
    </el-form-item>
    <el-form-item label="应用服务配置">
      <span v-for="i in form.apis" style="margin-right:10px;">{{logTypeApi[i]}}</span>
    </el-form-item>
    <el-form-item>
  <el-button type="primary" @click="onSubmit">返回应用列表</el-button>
  </el-form-item>
  </el-form>
  </div>

</template>

<script>
import { getOne } from '@/api/app'
import { logTypeApi, logTypePush } from '@/utils/auth'

export default {
  data() {
    return {
      form: {
        name: '',
        gateway: '',
        hooks: '',
        apis: [],
        secret: [],
        enable: true
      },
      logTypeApi,
      logTypePush,
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    getOne({
      _id: this.$route.query._id
    }).then(info => {
      Object.assign(this.form, info.data)
    })
  },
  methods: {
    onSubmit() {
      this.$router.replace('/app/list')
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

